<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/html_head :: head(~{::title},~{},~{})">
  <title th:text="${table.name}">xxx信息收集表</title>
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">

  <header class="main-header">headImage
    <nav class="navbar navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <a href="/index" class="navbar-brand"><b>智汇</b>信息</a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
            <i class="fa fa-bars"></i>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
          <form action="/search" method="get" class="navbar-form navbar-left" role="search">
            <div class="input-group">
              <input type="text" name="tableName" class="form-control sql-injection-filter" placeholder="搜索收集表..." required>
              <span class="input-group-btn">
              <button type="submit" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
              </button>
            </span>
            </div>
          </form>
        </div>
        <!-- /.navbar-collapse -->
        <!-- Navbar Right Menu -->
        <div th:insert="common/top :: rightMenu"></div>
        <!-- /.navbar-custom-menu -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </header>
  <!-- Full Width Column -->
  <div class="content-wrapper">
    <div class="container">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1><span th:text="${table.name}">xxx收集表</span>
          <small th:text="${table.state}">收集中</small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
          <li><a href="/collect/my">我的表</a></li>
          <li><a th:href="'/collect/my/detail?t=' + ${table.id}" th:text="${table.name}">xxx收集表</a></li>
          <li class="active">表数据</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">

        <div class="box">
          <div class="box-header">
            <h3 class="box-title">表数据 <a th:href="'/collect/share/start?t=' + ${table.id}">去填写</a></h3>
            <div class=" pull-right" th:if="${table.owner eq session.user.id}">
              <a th:href="'/collect/export?t=' + ${table.id}">
                <button type="button" class="btn btn-sm btn-success" th:remove="${'编辑中' == table.state ? 'all' : 'none'}">
                  <i class="glyphicon glyphicon-export"> </i> 导出
                </button>
              </a>
            </div>

          </div>
          <!-- /.box-header -->
          <div class="box-body" id="tableArea">
            <table class="table table-bordered table-striped table-responsive data-table" style="width:100%">
              <thead>
              <tr>
                <th th:each="head : ${headers}" th:text="${head}">Rendering engine</th>
                <th th:if="${session.user.id eq table.owner}">IP</th>
                <th th:if="${session.user.id eq table.owner}">浏览器</th>
                <th th:if="${session.user.id eq table.owner}">系统</th>
                <th th:if="${session.user.id eq table.owner}">填写时间</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="answerRecord : ${answerRecords}">
                <div th:each="answer : ${answerRecord.answerList}">
                    <td th:text="${answer.content}" th:remove="${answer.type == '文件'} ? 'all' : 'none'">回答内容</td>
                    <td th:remove="${answer.type == '文件'} ? 'none' : 'all'">
                      <a th:href="${answer.content}" th:text="文件"></a>
                       </td>
                  </div>
                <td th:if="${session.user.id eq table.owner}" th:text="${answerRecord.ip}">IP</td>
                  <td th:if="${session.user.id eq table.owner}" th:text="${answerRecord.deviceSystem}">操作系统</td>
                  <td th:if="${session.user.id eq table.owner}" th:text="${answerRecord.browser}">浏览器</td>
                  <td th:if="${session.user.id eq table.owner}" th:text="${#dates.format(answerRecord.updateTime, 'yyyy-MM-dd HH:mm')}">填写日期</td>
                <td><a th:href="'/user/info/' + ${answerRecord.userId}">填写者</a></td>
              </tr>
              </tbody>
              <tfoot>
              <tr>
                <th th:each="head : ${headers}" th:text="${head}">Rendering engine</th>
                <th th:if="${session.user.id eq table.owner}">IP</th>
                <th th:if="${session.user.id eq table.owner}">浏览器</th>
                <th th:if="${session.user.id eq table.owner}">系统</th>
                <th th:if="${session.user.id eq table.owner}">填写时间</th>
              </tr>
              </tfoot>
            </table>
              <a th:href="'/collect/share/' + ${table.id}">
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> 分享</button>
              </a>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> 赞</button>
            <a th:href="'/user/info/' + ${table.owner}">  看主表人</a>
            <span class="pull-right text-muted"><span >1</span> 赞 - <span th:text="${#lists.size(commentList)}"></span> 评论</span>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <form th:action="'/comment/table/'+ ${table.id}" method="post" name="commentForm">
              <input hidden="hidden" name="aimCommentId">
              <img class="img-responsive img-circle img-sm" th:src="${session.user.headImage}" alt="我的头像">
              <!-- .img-push is used to add margin to elements next to floating images -->
              <div class="input-group margin img-push">
                <input type="text" class="form-control input-sm"  placeholder="回车也可以快速发表评论提问哟~"
                       name="commentContent" id="commentContent"
                       onkeydown="if(event.keyCode=='13') commentForm.submit.click();else if(event.keyCode=='8')resetContetnt();">
                <span class="input-group-btn">
                      <button class="btn btn-info btn-flat" type="submit" id="commentBtn" name="submit">发送</button>
                    </span>
              </div>
            </form>
          </div>
          <!-- /.box-footer -->
          <!-- 评论 -->
          <div class="box-footer box-comments">

            <div class="box-comment" th:each="comment : ${commentList}" th:id="'comment-' + ${comment.id}">
              <!-- User image -->
              <a th:href="'/user/info/' + ${comment.userId}">
                <img class="img-circle img-sm" th:src="${comment.userHeadImage}" th:alt="${comment.userName}">
              </a>
              <div class="comment-text">
                <span class="username">
                  <a th:href="'/user/info/' + ${comment.userId}">
                    <span th:text="${comment.userName}">张三</span>
                  </a>
                  <span class="text-muted pull-right" th:text="${#dates.format(comment.createTime, 'MM-dd HH:mm')}"> 10-16 13:14</span>
                </span>
                <span th:text="${comment.content}">我是张三的评论内容</span>
                <br>
                <!--<a href="javascript:void(0)">赞 ( <span >0</span> ) </a>-->
                <a th:onclick="'replyComment(' + ${comment.id} + ')'">
                  回复 (
                  <span th:text="${#lists.isEmpty(comment.replyList) ? '0' : #lists.size(comment.replyList)}">0</span>
                  )
                </a>
                <a th:onclick="'deleteComentById(' + ${comment.id} + ')'" th:if="${table.owner eq session.user.id or comment.userId eq session.user.id}">删除</a>
              </div>
                <!-- 回复 -->
                <div class="box-comment" style="margin-left:30px" th:each="reply : ${comment.replyList}" th:id="'comment-' + ${reply.id}">
                    <!-- User image -->
                  <a th:href="'/user/info/' + ${reply.userId}">
                    <img class="img-circle img-sm" th:src="${reply.userHeadImage}" th:alt="${reply.userName}">
                  </a>
                    <div class="comment-text">
                <span class="username">
                  <a th:href="'/user/info/' + ${reply.userId}">
                    <span th:text="${reply.userName}">李四</span>
                  </a>
                  <span class="text-muted pull-right" th:text="${#dates.format(reply.createTime, 'MM-dd HH:mm')}"> 10-16 13:14</span>
                </span>
                        <span  style="color: #999999;" oncopy="event.returnValue=false;" ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
                            回复 <span th:text="${comment.userName}">张三</span> :
                        </span>
                        <span th:text="${reply.content}">李四回复张三的内容</span>
                        <br>
                        <!--<a href="javascript:void(0)">赞 ( <span >0</span> ) </a>-->
                      <!--<a th:onclick="'replyComment(' + ${reply.id} + ')'">回复</a>-->
                        <a th:onclick="'deleteComentById(' + ${reply.id} + ')'" th:if="${table.owner eq session.user.id or reply.userId eq session.user.id}">删除</a>
                    </div>
                    <!-- /.comment-text -->
                </div>
              <!-- /.comment-text -->
            </div>

          </div>
          <!-- /.box-footer 评论结束 -->

        </div>
        <!-- /.box -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.container -->
  </div>

  <!-- /.content-wrapper -->
  <!-- 页脚 -->
  <footer th:insert="common/bottom :: footer"></footer>
  <!-- Control Sidebar 右侧边栏 -->
  <aside th:insert="common/right :: aside"></aside>
  <!-- 右侧边栏的背景，必须紧接着control sidebar放这个  -->
  <div th:insert="common/right :: aside2"></div>
</div>
<!-- ./wrapper -->
<!-- Js 脚本 -->
<div th:insert="common/html_js :: div_js"></div>
<!-- DataTable 脚本 -->
<div th:insert="common/html_js :: data_table_js"></div>
<!-- page script -->
<script>
    function replyComment(comentId){
        $("#commentContent").val('[reply]' + comentId + '[/reply]');
        $("#commentContent").focus();
        $("html,body").animate({scrollTop: $("#commentContent").offsetTop}, 1000);
    }
    String.prototype.endWith=function(str){
        var reg=new RegExp(str+"$");
        return reg.test(this);
    }
    function isStrEndWith(str, endStr){
        var d = str.length-endStr.length;
        return (d >= 0 && str.lastIndexOf(endStr)==d)
    }
    function resetContetnt(){
        var content = $("#commentContent").val();
        content = new String(content);
        if(content.indexOf('[reply]') != -1 && isStrEndWith(content, '[/reply]'))
          $("#commentContent").val('');
    }
  function deleteComentById(comentId){
      var targetUrl = '/comment/delete/' + comentId;
      $.ajax({
          type:'post',
          url:targetUrl,
          dataType:'json',
          success:function(data){
              if(data.message == "success"){
                  $('#comment-' + comentId).remove();
                  alert("删除成功");
              }else{
                  alert("操作失败" + data.detail);
              }
          },
          error:function(){
              alert("错误");
          }
      })
  }

</script>

</body>
</html>
